<template>
    <div>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="240">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="delete1(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--分页：-->
    <el-pagination style="width: 100%"
            background
            layout="prev, pager, next"
            page-size="6"
            :total="total"
            @current-change="page" >
    </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            delete1(row){
                // alert("delete")
                const _this=this
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function (response) {
                    // alert(response.status)
                    if(response.status ==200){
                        _this.$alert('书名:'+row.name+'   作者:'+row.author, '删除成功！', {
                            confirmButtonText: '确定',
                            callback: action => {
                                //动态刷新
                              window.location.reload();
                            }
                        });
                    }
                    else{
                        _this.$message('删除失败，检查后端代码！');
                    }
                })
            },
            edit(row) {
                this.$router.push({
                    path: '/BookUpdate',
                    query:{
                        id: row.id
                    }
                })
            },
            page(currentPage){
                // alert(currentPage)
                const  _this=this
                axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (response) {
                    _this.tableData=response.data.content
                    _this.total=response.data.totalElements
                })
            }
        },
        created() {
            const  _this=this
            axios.get('http://localhost:8181/book/findAll/1/6').then(function (response) {
                _this.tableData=response.data.content
                _this.total=response.data.totalElements
            })
        },
        data() {
            return {
                total:null,
                tableData:null
            }
        }
    }
</script>